<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta charset="UTF-8">
		<title></title>
		<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
		<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../dist/css/mobiscroll.custom-3.0.0.min.css"/>
		<script src="../dist/js/mobiscroll.custom-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="container">
			<div style="height: 20px;"></div>
			
			
			
				<button type="button" class="btn btn-primary" id="show">Primary</button>
	
	  <div id="demo" style="display: none;">
            <div class="md-logo micons icon-mbsc-logo"></div>
            <form class="md-form" mbsc-enhance>
                <div class="mbsc-input">
                    <input id="email" type="text" name="Email" placeholder="Email" />
                </div>
                <div class="mbsc-input">
                    <input name="Password" type="text" class="md-passw-field" placeholder="Password" />
                </div>
                <div>
                    Hide password
                    <input type="checkbox" class="md-passw-toggle" data-role="toggle" />
                </div>
            </form>
       
</div>

	
			<!--<input type="text" class="form-control" id="demo" placeholder="请输入..." />-->
		
			</div>
		
		<script>
			
			$(function(){
				
				 $('#show').click(function () {
        $('#demo').mobiscroll('show');
        return false;
    });
				
			  $('#demo').mobiscroll().widget({
        theme: 'ios',
        lang: 'zh',
        display: 'center',
        anchor: $('#show'),
        buttons: [{
            text: 'Sign In',
            handler: 'set'
        }, {
            text: 'Cancel',
            handler: 'cancel'
        }],
        cssClass: 'md-signin-demo',
        onBeforeShow: function (event, inst) {
            var s = inst.settings;

            if (s.theme == 'wp' || s.baseTheme == 'wp') {
                s.buttons[0].icon = 'checkmark';
                s.buttons[1].icon = 'close';
            }
        }
    });

    $('.md-passw-toggle').change(function (ev) {
        $('.md-passw-field').attr('type', this.checked ? 'password' : 'text');
    });
				
				
			})
			
		</script>
		
	</body>
</html>
